<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="no-cache, no-store, must-revalidate" http-equiv="Cache-Control"/>
    <meta content="no-cache" http-equiv="Pragma"/>
    <meta content="0" http-equiv="Expires"/>
    <title></title>
    <link rel="stylesheet" href="../styles/base.css"/>
    <link rel="stylesheet" href="../styles/common.css"/>
    <link rel="stylesheet" href="../styles/pages/calendar.css">
    <link rel="stylesheet" href="../jqueryNicepage/css/layui.css"  media="all">
    <style>
        .body{
            background:#ddecf5;
            min-width: 1300px;
            overflow-y: hidden;
        }
        html {
            font: 500 14px 'roboto';
        }
        a {
            text-decoration: none;
        }
        ul, ol, li {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .dateHeader{
            width:100%;
            border-bottom:2px solid #ccc;
            /*margin-bottom: 20px;*/
        }
        #demo {
            width: 100%;
            font-size: 16px;
            padding-left:2%;
          /* //margin: 150px auto;*/
        }
        #demo input {
            padding-left:10px;
        }
        p {
            margin: 0;
        }
        #dt ,#dt1{
            margin: 30px auto;
            height: 30px;
            width: 150px;
            padding: 0 6px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            font-size: 14px;
            outline: none;
            line-height: 30px;
        }
        .selectInline{
            display:inline-block;
            height:30px;
            margin:10px;
        }
        .selectInline #select{
            width:150px;
            height:30px;
            line-height: 30px;
            font-size: 14px;
          /*  border-color:#ddd;*/
            outline: none;
            box-sizing: border-box;
        }
        .selectInline span{
            display: inline-block;
            box-sizing: border-box;
            border:1px solid #ccc;
            height:30px;
            margin-right:10px;
            line-height: 30px;
            margin-left: 3px;
            /*margin-top: 2px;
            padding:10px;*/
        }
        /*.selectInline span {
            margin-left: 5px;
        }*/
        .dataInput{
            padding-left: 5px;
        }
        #btnBorder{
            margin-top: 30px;
            border:none;

        }
        .selectInline span:nth-last-child(1){
            border:none;
        }
        .submitMes{
            float: right;
            margin-left: 10px;
            background-color: #eee;
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            text-decoration: none;
            font-weight: 600;
            color: #333;
            position: relative;
            padding: 1px 13px;
            margin-right: 10px;
            margin-top: 8px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(242,242,242)), color-stop(1, rgb(242,242,242)) );
            cursor: pointer;
        }
        .submitMes:hover{
            color:#fff;
            background:#40E0D0;
        }
        #select option{
            width:100%;
            height:30px;
            line-height:30px;
        }
        .selectBox{
            position:relative;

        }
        .selectBox ul{
            position:absolute;
            z-index: 999999;
            background:#fff;
            border:1px solid #ccc;
            width:150px;
            height:auto;
            display: none;
            left: 131px;
        }
        .selectBox ul li{
            width:140px;
            height:30px;
            line-height: 30px;
            font-size: 14px;
            padding-left:10px;

        }
        .selectBox ul li:hover{
            background:#f2f2f2;
        }
        input{
            font-size: 14px;
        }
        #searchInput{
            height:30px;
            font-size: 14px;
            line-height: 30px;
        }
        .body .searchContainer{
            width:96%;
            margin-left:2%;
            max-height: 96%;
            margin-top: 0px;
            min-width: 1200px;
        }
        .formContent center{
            margin-top:-10px;
        }
        .formContent center #table2{
            max-height:70%;
            width:100%;
        }
        .formContent center #pageBar2{
            position:absolute;
            bottom:0px;
            width:100%;
            text-align: center;
        }
        .td0 a{
            float:left;
            width:100%;
            padding:0 0px;
            color:#0000FF;
            cursor: pointer;
            text-decoration:underline;
            text-align: center;
        }
    </style>
</head>
<body class="body">
<div id="loading">
    <img src='../styles/img/loading.gif' />
</div>
<div class="searchContainer">
    <div class="dateHeader">
        <div id="demo">
            日期：<span><e style="margin-right:5px;">From:</e><input class="dataInput" type="text" readonly="readonly" unselectable="on" id="dt" placeholder="请输入开始日期">
            <e style="margin-right:5px;">To:</e><input class="dataInput" readonly="readonly" unselectable="on" type="text" id="dt1" placeholder="请输入截止日期"></span>
            <div id="dd"></div>
            <div id="tt"></div>
            <span class="selectInline"><div class="selectBox">
                请选择输入类型：<span><input readonly="readonly" unselectable="on" type="text" placeholder="--请选择--" id="select"/></span>
                <ul name="" id="selectList">
                    <li></li>
                    <li id="ECONumber">ECO编号</li>
                    <li id="str1">受影响对象</li>
                    <li id="creator">创建者</li>
                </ul>
                请输入对应编号或名称：<span><input maxlength="20" type="text" placeholder="请输入对应编号或名称" id="searchInput"/></span>
                <span id="btnBorder"><div class="submitMes">搜索</div></span>
            </div></span>
        </div>
    </div>
    <div class="formContent">
    </div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script src="../layer/layer.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/common/myAjax.js"></script>
<script type="text/javascript" src="../js/constants/calendar.js"></script>
<script type="text/javascript" src="../js/common/utils.js"></script>
<script>
    $(function(){
        maximizeWindow();
        function getIndexof(textsArr,value){
            var index;
            if(!textsArr.indexOf){
                textsArr.indexOf = function(elt /*, from*/){
                    var len = this.length >>> 0;
                    var from = Number(arguments[1]) || 0;
                    from = (from < 0)
                            ? Math.ceil(from)
                            : Math.floor(from);
                    if (from < 0)
                        from += len;
                    for (; from < len; from++)
                    {
                        if (from in this &&
                                this[from] === elt)
                            return from;
                    }
                    return -1;
                };
                index=textsArr.indexOf(value);
            }else{
                index= textsArr.indexOf(value);
            }
            return index;
        }
        function maximizeWindow(){
            var offset = (getIndexof(navigator.userAgent,"Mac") != -1 || getIndexof(navigator.userAgent,"Gecko") != -1 ||
            getIndexof(navigator.appName,"Netscape") != -1) ? 0 : 4;
            window.moveTo(-offset, -offset);
            window.resizeTo(screen.availWidth + (2 * offset), screen.availHeight + (2 * offset));
        }
        var selectType="";
        $('#dd').calendar({
            trigger: '#dt',
            zIndex: 999,
            format: 'yyyy-mm-dd',
            onSelected: function (view, date, data) {
            },
            onClose: function (view, date, data) {
                var nowData=splitDataTime(getNowFormatDate().split(" ")[0]) ;
                var dat=$('#dt').val();
                var thisData=splitDataTime(dat);
                if(parseInt(thisData)>parseInt(nowData)){
                    $('#dt').val("");
                }
                getTimeFn();
            }
        });

        $('#tt').calendar({
            trigger: '#dt1',
            zIndex: 999,
            format: 'yyyy-mm-dd',
            onSelected: function (view, date, data) {
               /* console.log('event: onSelected')*/
            },
            onClose: function (view, date, data) {
                getTimeFn();
            }
        });
        //判断起止时间是否符合格式要求，结束时间不得早于开始时间
        function getTimeFn(){
            if($('#dt').val()!=""&&$('#dt1').val()){
                var time=splitDataTime($('#dt').val())
                var num= parseInt(time) ;

                var time1=splitDataTime($('#dt1').val())

                var num1= parseInt(time1) ;

                if(num1<num){
                    $("#dt1").val("");
                    $("#dt").val("");
                    layerFn("时间格式不正确，截止时间不能早于开始时间。")
                }
            }
        }
        //下拉框点击赋值
        $("#selectList").on("click","li",function(event){
            var text=$(this).text();
            $("#select").val(text);
           $("#selectList").css({"display":"none"});
            selectType=$(this).attr("id");
            event=event||window.event
            event.stopPropagation();
            return false;
        })
        //点击展示下拉列表
        $("#select").click(function(e){
            $("#selectList").css({"display":"block"})
            window.event? window.event.cancelBubble = true : e.stopPropagation();
        })
        //点击空白隐藏下拉框
           window.onclick=function(){
               if($("#selectList").css("display")=="block"){
                   $("#selectList").css({"display":"none"})
               }

           }
        //搜索
        $(".submitMes").click(function(){
            var $dt1=$("#dt1").val()?$("#dt1").val()+" 23:59:59":"";
            var $dt=$("#dt").val()!=""?$("#dt").val():"";
            var inputVal=$("#searchInput").val();
            if($dt1!=""||$dt!=""||(inputVal!=''&&selectType!="")){
                var data={}
                    data={
                        "startdate":$dt,
                        "enddate":$dt1,
                        "key":selectType,
                        "value":inputVal
                    }
                var url="/tmSearchECO";
                myAjaxData(url,data,suCallback,errCallback);
                $("#loading").css({
                    display:"block"
                });
                var height=document.body.clientHeight;
                var width =document.body.clientWidth;
                $("#loading img").css({
                    "margin-left":width/2-25+"px",
                    "margin-top":height/2-25+"px"
                })
            }else{
                if($dt1==""&&$dt==""&&(inputVal==''&&selectType=="")){
                    layerFn("至少输入一个查询条件");
                }else if(inputVal==''&&selectType!=""){
                    layerFn("请输入编号或名称");
                } else if(selectType==''&&inputVal!=''){
                    layerFn("请选择输入类型");
                }

            }
        })
        //ajax成功回调
        function suCallback(str){
            $("#loading").css({
                display:"none"
            });
                if(str.datalist.length>0){
                    var dataLists=[];
                    for(var i=0;i<str.datalist.length;i++){
                        var objV={};
                        objV.econumber=str.datalist[i].econumber;
                        objV.creator=str.datalist[i].creator;
                        objV.createtime=str.datalist[i].createtime;
                        dataLists.push(objV)
                    }
                    dataLists.sort(compareUp("createtime"));
                    function compareUp(propertyName) { // 升序排序
                        if ((typeof dataLists[0][propertyName]) != "number") { // 属性值为非数字
                            return function(object1, object2) {
                                var value1 = object1[propertyName];
                                var value2 = object2[propertyName];
                                return value1.localeCompare(value2);
                            }
                        }
                        else {
                            return function(object1, object2) { // 属性值为数字
                                var value1 = object1[propertyName];
                                var value2 = object2[propertyName];
                                return value1 - value2;
                            }
                        }
                    }
                    window.historyList1=dataLists;
                    window.reportQuery="true";
                    window.headers1=["序号","ECO编号","创建者","创建时间","查阅"]
                    window.widths1=[100,300,300,300,100]
                    $(".formContent").empty().load('./searchNicePage.html',"",function(){
                        setTimeout(function(){
                            var heightform=$(".searchContainer").height()-$(".dateHeader").height()-20;
                            $(".formContent").css({
                                "max-height":heightform*0.90,
                                "overflow-y":"scroll"
                            });
                            if($(".formContent")[0].offsetHeight>(heightform*0.90)){
                                $("#pageBar2").css("top",heightform*0.90+$(".dateHeader").height()+20)
                            }else{
                                $("#pageBar2").css("top",$(".formContent")[0].offsetHeight+$(".dateHeader").height()+30);
                            }

                            clearTimeout();
                        },500)
                    });
                }else{
                    $(".formContent").empty();
                    layerFn("您查询的数据不存在");
                }

        }
        function errCallback(err){
            $("#loading").css({
                display:"none"
            });
        }
    })
    $(".formContent").scroll(function() {
        var scrolltop=$(this).scrollTop();
        if(scrolltop>0){
            $("#table2 table thead").css({
                "position":"absolute",
                "background":"#f2f2f2",
                "opacity":"1",
                "z-index": 999,
                "top":"111px"
            })
        }else{
            $("#table2 table thead").css({
                "position":""
            })
        }
        for (var i = 0; i <  window.headers1.length; i++) {
            var width = $("#table2 table tbody tr:first-child td").eq(i).width();
            $("#table2 .layui-table thead tr:first-child th").eq(i).css({
                "width": width+1
            })

            if(IEVersion()>(8)){
                $("#table2 .layui-table thead tr:first-child th").eq(i).css({
                    "width": width
                })
            }else if(IEVersion()==(8)){
                $("#table2 .layui-table thead tr:first-child th").eq(i).css({
                    "width": width+1
                })
            }
        }
    })
    $(window).resize(function () { //当浏览器大小变化时
        //console.log($("#table2 table").width())
        $("#table2 table thead tr").css({
            "width":$("#table2 table").width()

        })
        var heightform=$(".searchContainer").height()-$(".dateHeader").height()-20;
        $(".formContent").css({
            "max-height":heightform*0.90,
            "overflow-y":"scroll"
        });
        if($(".formContent")[0].offsetHeight>(heightform*0.90)){
            $("#pageBar2").css("top",heightform*0.90+$(".dateHeader").height()+20)
        }else{
            $("#pageBar2").css("top",$(".formContent")[0].offsetHeight+$(".dateHeader").height()+30);
        }
        for (var i = 0; i <  window.headers1.length; i++) {
            var width = $("#table2 table tbody tr:first-child td").eq(i).width();
            $("#table2 .layui-table thead tr:first-child th").eq(i).css({
                "width": width+1
            })

            if(IEVersion()>(8)){
                $("#table2 .layui-table thead tr:first-child th").eq(i).css({
                    "width": width
                })
            }else if(IEVersion()==(8)){
                $("#table2 .layui-table thead tr:first-child th").eq(i).css({
                    "width": width+1
                })
            }
        }
    });
</script>
</html>